<template>
  <div class="left-two" :style="{ height: height + 'px' }">
    <out-line :height="height">
      <div>
        <div class="module-title">
          <div class="left">
            <div class="text">老人数据</div>
            <!-- <img class="pic" src="@/assets/images/mtitle.png" /> -->
          </div>
          <div class="tab-titles">
            <div v-for="(tab, index) in tabs" :key="index" :class="{ 'active': activeTab === index }"
              @click="changeTab(index)">
              {{ tab.title }}
            </div>
          </div>
        </div>
        <div class="tab-content">
          <div v-show="activeTab === 0">
            <div class="age" :style="dynamicStyles">
              <div class="female">
                <div class="percentage">
                  <div>{{ femalePro }}%</div>
                  <div>女</div>
                </div>
                <div class="count">
                  <span class="num">{{ femaleNum }}</span>
                  <span class="unit">人</span>
                </div>
              </div>
              <div class="male">
                <div class="percentage">
                  <div>{{ malePro }}%</div>
                  <div>男</div>
                </div>
                <div class="count">
                  <span class="num">{{ maleNum }} </span>
                  <span class="unit">人</span>
                </div>
              </div>
            </div>

          </div>
          <div v-show="activeTab === 1">
            <div class="old-content">
              <div class="old-item">
                <oldChart1 v-if="activeTab === 1" />
                <div class="num">{{ formatNumberWithCommas(24) }}</div>
                <div class="text">60-69周岁</div>
              </div>
              <div class="old-item">
                <oldChart2 v-if="activeTab === 1" />
                <div class="num">{{ formatNumberWithCommas(89) }}</div>
                <div class="text">70-79周岁</div>
              </div>
              <div class="old-item">
                <oldChart3 v-if="activeTab === 1" />
                <div class="num">{{ formatNumberWithCommas(566) }}</div>
                <div class="text">80-89周岁</div>
              </div>

              <div class="old-item">
                <oldChart4 v-if="activeTab === 1" />
                <div class="num">{{ formatNumberWithCommas(788) }}</div>
                <div class="text">90-94周岁</div>
              </div>
              <div class="old-item">
                <oldChart5 v-if="activeTab === 1" />
                <div class="num">{{ formatNumberWithCommas(866) }}</div>
                <div class="text">95-99周岁</div>
              </div>
              <div class="old-item">
                <oldChart6 v-if="activeTab === 1" />
                <div class="num">{{ formatNumberWithCommas(788) }}</div>
                <div class="text">100周岁以上</div>
              </div>
            </div>
          </div>
          <div v-show="activeTab === 2">
            <!-- 饼状图内容 -->
            <div class="old-content">
              <div class="ability-item">
                <abilityChart1 v-if="activeTab === 2" :percentage="goodPowerPro" />
                <!-- <div class="num">{{formatNumberWithCommas(powerArr[0].value)}}</div> -->
                <div class="num">{{ formatNumberWithCommas(22.00) }}</div>
                <div class="text">能力完好</div>
              </div>
              <div class="ability-item">
                <abilityChart2 v-if="activeTab === 2" :percentage="mildPowerPro" />
                <!-- <div class="num">{{formatNumberWithCommas(powerArr[1].value)}}</div> -->
                <div class="num">{{ formatNumberWithCommas(22.00) }}</div>
                <div class="text">轻度失能</div>
              </div>
              <div class="ability-item">
                <abilityChart3 v-if="activeTab === 2" :percentage="mediumPowerPro" />
                <div class="num">{{ formatNumberWithCommas(22.00) }}</div>
                <!-- <div class="num">{{formatNumberWithCommas(powerArr[2].value)}}</div> -->
                <div class="text">中度失能</div>
              </div>
              <div class="ability-item">
                <abilityChart4 v-if="activeTab === 2" :percentage="seriousPowerPro" />
                <!-- <div class="num">{{formatNumberWithCommas(powerArr[3].value)}}</div> -->
                <div class="num">{{ formatNumberWithCommas(22.00) }}</div>
                <div class="text">重度失能</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </out-line>
  </div>
</template>

<script>
import { getOldChartData, getPowerChartData } from "@/api/pcs/index"
export default {
  props: {
    height: {
      type: Number,
      required: true
    }
  },
  components: {
    oldChart1: () => import('@/components/koi/left/oldChart1.vue'),
    oldChart2: () => import('@/components/koi/left/oldChart2.vue'),
    oldChart3: () => import('@/components/koi/left/oldChart3.vue'),
    oldChart4: () => import('@/components/koi/left/oldChart4.vue'),
    oldChart5: () => import('@/components/koi/left/oldChart5.vue'),
    oldChart6: () => import('@/components/koi/left/oldChart6.vue'),
    abilityChart1: () => import('@/components/koi/left/abilityChart1.vue'),
    abilityChart2: () => import('@/components/koi/left/abilityChart2.vue'),
    abilityChart3: () => import('@/components/koi/left/abilityChart3.vue'),
    abilityChart4: () => import('@/components/koi/left/abilityChart4.vue'),
  },
  data() {
    return {
      activeTab: 1,
      tabs: [
        { title: '性别' },
        { title: '年龄段' },
        { title: '能力等级' }
      ],
      maleNum: 0, // 男
      femaleNum: 0, // 女
      oldTotal: 0,
      malePro: 0,
      femalePro: 0,
      interval: null,
      powerInterval: null,
      powerArr: [],
      goodPowerPro: 0,
      mildPowerPro: 0,
      mediumPowerPro: 0,
      seriousPowerPro: 0,
      dynamicStyles: {
        backgroundSize: '100px', // 设置默认的backgroundSize
        height: '100px' // 设置默认的height
      }
    };
  },
  created() {
    this.getOldChartData()
    // this.interval = setInterval(() => {
    //   this.getOldChartData(); // 每隔一分钟请求接口
    // }, 12000);

    this.getPowerChartData()
    // this.powerInterval = setInterval(() => {
    //   this.getPowerChartData(); // 每隔一分钟请求接口
    // }, 12000);
  },
  beforeDestroy() {
    // clearInterval(this.interval); // 在组件销毁前清除定时器
    // this.interval = null
    // clearInterval(this.powerInterval); // 在组件销毁前清除定时器
    // this.powerInterval = null
    // console.log("beforeDestroybeforeDestroy")
  },
  destroyed() {
    // clearInterval(this.interval); // 在组件销毁前清除定时器
    // this.interval = null
    // clearInterval(this.powerInterval); // 在组件销毁前清除定时器
    // this.powerInterval = null
    // console.log("destroyeddestroyed")
  },
  mounted() {
    console.log("this.height", this.height)
    this.dynamicStyles.backgroundSize = this.height - 60 + 'px';
    this.dynamicStyles.height = this.height - 60 + 'px';
  },
  methods: {
    changeTab(index) {
      this.activeTab = index;
    },
    formatNumberWithCommas(number) {
      return number.toLocaleString();
    },
    getOldChartData() {
      getOldChartData().then((res) => {
        if (res.code === 2000) {
          this.maleNum = res?.data[0]?.value
          this.femaleNum = res?.data[1]?.value
          let oldTotal = res.data[0].value + res.data[1].value + res.data[2].value
          let boyPer = (this.maleNum / oldTotal) * 100
          let girlPer = (this.femaleNum / oldTotal) * 100
          this.malePro = parseFloat(boyPer.toFixed(2))
          this.femalePro = parseFloat(girlPer.toFixed(2))
        }
      }).catch(err => {
        console.log(err)
      })
    },
    getPowerChartData() {
      getPowerChartData().then((res) => {
        if (res.code === 2000) {
          this.powerArr = res?.data
          let powerTotal = res.data[0].value + res.data[1].value + res.data[2].value + res.data[3].value
          // 能力完好
          let goodPowerPer = (res.data[0].value / powerTotal) * 100
          this.goodPowerPro = parseFloat(goodPowerPer.toFixed(2))
          // 轻度失能
          let mildPowerPer = (res.data[1].value / powerTotal) * 100
          this.mildPowerPro = parseFloat(mildPowerPer.toFixed(2))
          // 中度失能
          let mediumPowerPer = (res.data[2].value / powerTotal) * 100
          this.mediumPowerPro = parseFloat(mediumPowerPer.toFixed(2))
          // 重度失能
          let seriousPowerPer = (res.data[3].value / powerTotal) * 100
          this.seriousPowerPro = parseFloat(seriousPowerPer.toFixed(2))
        }
      }).catch(err => {
        console.log(err)
      })
    }
  }
};
</script>
<style lang="less" scoped>
.age {
  display: flex;
  justify-content: space-between;
  background: url("../../../assets/images/agebg.png") center bottom no-repeat;
}

.female,
.male {
  width: 115px;
  height: 200px;
  color: #ffffff;
  text-align: center;
  margin-top: 30px;
}

.female {
  background: url("../../../assets/images/female.png") top center no-repeat;
}

.male {
  background: url("../../../assets/images/male.png") top center no-repeat;
}

.percentage {
  font-size: 18px;
  color: #ffffff;
  margin-top: 38px;
}

.count {
  font-weight: normal;
  color: #00faa8;
  // display:flex;
  text-align: center;
  margin-top: 32px;

  .num {
    font-size: 20px;
    // font-family: DS-Digital;
    font-family: 'electronicFont';
  }

  .unit {
    font-size: 14px;
  }
}

.old-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.old-item {
  width: calc(33.33% - 10px);
  margin-bottom: 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
  // justify-content: space-between;

  .num,
  .text {
    text-align: center;
  }

  .num {
    font-size: 16px;
    color: #ffffff;
    font-family: 'electronicFont';
  }

  .text {
    font-size: 12px;
  }
}

.ability-item {
  width: calc(25% - 10px) !important;
  margin-bottom: 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;

  .num,
  .text {
    text-align: center;
  }

  .num {
    font-size: 16px;
    color: #ffffff;
  }

  .text {
    font-size: 12px;
  }
}
</style>


